import React, { useState } from 'react';
import { connect,history } from 'umi';
import RightContainer from '@/components/RightContainer';
import { Button, Badge, Tooltip ,Switch ,Image,Cascader,Input} from 'antd';
import { QuestionCircleOutlined } from '@ant-design/icons';
import ProTable, { ProColumns } from '@ant-design/pro-table';
import './index.less';
const { Search } = Input;

const tableListDataSource = [];
const searchOptions = [
  {
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [
      {
        value: 'hangzhou',
        label: 'Hangzhou',
        children: [
          {
            value: 'xihu',
            label: 'West Lake',
          },
        ],
      },
    ],
  },
  {
    value: 'jiangsu',
    label: 'Jiangsu',
    children: [
      {
        value: 'nanjing',
        label: 'Nanjing',
        children: [
          {
            value: 'zhonghuamen',
            label: 'Zhong Hua Men',
          },
        ],
      },
    ],
  },
];
const creators = ['付小小', '曲丽丽', '林东东', '陈帅帅', '兼某某'];
const status=[0,1];
for (let i = 0; i < 30; i += 1) {
  tableListDataSource.push({
    key: i,
    id: parseInt(Math.random()*1000),
    goods_img: 'https://unsplash.it/400/800/?'+Math.floor(Math.random() * 20),
    goods_title:"HL A海澜之家多色款长袖针织杉休闲能描系列简约舒适毛衣男",
    goods_price:88.88,
    goods_sales:parseInt(Math.random()*100),
    goods_inventor:parseInt(Math.random()*100),
    goods_rank:parseInt(Math.random()*1000),
    goods_status:Boolean(status[parseInt(Math.random()*status.length)]),
    createdAt: Date.now() - Math.floor(Math.random() * 2000),
    creator: creators[Math.floor(Math.random() * creators.length)],
  });
}

const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
  },
  {
    title: '商品图',
    dataIndex: 'goods_img',
    render: _ => <div className="goods_img_wrapper"> <Image width={75} src={_} /></div>,
  },
  {
    title: '商品名称',
    dataIndex: 'goods_title',
    width: 200,
  },
  {
    title: '商品售价',
    dataIndex: 'goods_price',
    align:"center",
    sorter: (a, b) => a.goods_price - b.goods_price,
  },
  {
    title: '销量',
    dataIndex: 'goods_sales',
    sorter: (a, b) => a.goods_sales - b.goods_sales,
  },
  {
    title: '库存',
    dataIndex: 'goods_inventor',
    sorter: (a, b) => a.goods_inventor - b.goods_inventor,
  },
  {
    title: '排序',
    dataIndex: 'goods_rank',
    sorter: (a, b) => a.goods_rank - b.goods_rank,
  },
  {
    title: '状态',
    dataIndex: 'goods_status',
    render:(_)=><Switch defaultChecked={_} checkedChildren="上架" unCheckedChildren="下架"/>
  },
  
  {
    title: (
      <>
        操作时间
        <Tooltip placement="top" title="这是一段描述">
          <QuestionCircleOutlined style={{ marginLeft: 4 }} />
        </Tooltip>
      </>
    ),
    width: 140,
    key: 'since',
    dataIndex: 'createdAt',
    valueType: 'date',
    sorter: (a, b) => a.createdAt - b.createdAt,
  },
  {
    title: '操作',
    key: 'option',
    width: 200,
    align:"center",
    render: (_, record) => [
      <Button key="1" size="small" type="link" onClick={()=>alert('编辑')}>编辑</Button>,
      <Button key="2" size="small" type="link" onClick={()=>alert('回收站')} >加入回收站</Button>,
    ],
  },
];


const renderBadge = (count, active = false) => {
  return (
    <Badge
      count={count}
      style={{
        marginTop: -2,
        marginLeft: 4,
        color: active ? '#1890FF' : '#999',
        backgroundColor: active ? '#E6F7FF' : '#eee',
      }}
    />
  );
};


const index = (props) => {
  const [activekey, setActiveKey] = useState('tab1');
  const selectOnChange = (val)=>{}
  const searchOnChange = (val)=>{ }
  return (
    <RightContainer>
      <ProTable
        columns={columns}
        request={(params, sorter, filter) => {
          // 表单搜索项会从 params 传入，传递给后端接口。
          console.log(params, sorter, filter);
          return Promise.resolve({
            data: tableListDataSource,
            success: true,
          });
        }}
        toolbar={{
          // search: {
            
          //   onSearch: (value) => {
          //     alert(value);
          //   },
          // },
          // filter: (
          //   <LightFilter>
          //     <ProFormDatePicker name="startdate" label="响应日期" />
          //   </LightFilter>
          // ),
          menu: {
            type: 'tab',
            activeKey: activekey,
            items: [
              {
                key: 'tab1',
                label: <span>出售中的商品{renderBadge(6, activekey === 'tab1')}</span>,
              },
              {
                key: 'tab2',
                label: <span>仓库中商品{renderBadge(49, activekey === 'tab2')}</span>,
              },
              {
                key: 'tab3',
                label: <span>已经售馨商品{renderBadge(24, activekey === 'tab3')}</span>,
              },
              {
                key: 'tab4',
                label: <span>商品回收站{renderBadge(9, activekey === 'tab4')}</span>,
              }
            ],
            onChange: (key) => {
              setActiveKey(key);
            },
          },
          actions: [
            <Cascader options={searchOptions} onChange={selectOnChange} placeholder="Please select" />,
            <Search
              placeholder="请输入商品名称，关键字，商品ID"
              allowClear
              enterButton="搜索"
             
              onSearch={searchOnChange}
            />,
            <Button key="primary" type="primary" onClick={()=>history.push('/goods/add')}>
              添加商品
            </Button>,
          ],
        }}
        rowKey="key"
        pagination={{
          showQuickJumper: true,
        }}
        search={
         false
        }
        dateFormatter="string"
      />
    </RightContainer>
  );
};
export default connect()(index);

